<template>
  <div class="userCenterPage">
    <h1>个人中心</h1>

    <div
      id="main"
      style="
        width: 90%;
        height: 400px;
        border: 1px solid pink;
        background: #183656;
      "
    ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

let id = 1000

export default {
  name: 'userCenter',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initEchart()
    //使用递归将列表数据转为树形数据
    function tranListToTreeData(list, value) {
      //list为需要遍历数组，value是条件
      //定义空数组
      var arr = []
      //遍历list
      list.forEach((item) => {
        //如果list中的对象中的pid==value那么就找到了父级找到父之后，找子级
        if (item.pid === value) {
          //重新调用遍历方法，此时传递的参数为改变为遍历的对象中的id，此时判断pid是否等于id，如果等于就找到了子级
          const children = tranListToTreeData(list, item.id)
          //判断找到的子级是否为空
          if (children.length) {
            //不为空时把子级赋值给item的children
            item.children = children
          }
          //把item加入arr数组
          arr.push(item)
        }
      })
      //返回arr数组
      return arr
    }
  },
  methods: {
    initEchart() {
      const initEcharts = echarts.init(document.getElementById('main'))

      const data = [1360, 1320, 732, 701]
      const data2 = [500, 800, 900, 360]
      const sideData = data.map((item) => item + 90)
      const sideData2 = data.map((item) => item + 90)

      var colorArr = ['#0C628C', '#3887D5', '#2570BB']
      var color = {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[0],
          },
          {
            offset: 0.5,
            color: colorArr[1],
          },
          {
            offset: 1,
            color: colorArr[1],
          },
        ],
      }
      var barWidth = 30
      var option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var str = params[0].name + ':'
            params.filter(function (item) {
              if (item.componentSubType == 'bar') {
                str += '<br/>' + item.seriesName + '：' + item.value
              }
            })
            return str
          },
        },
        grid: {
          x: '7%',
          x2: '0%',
          y: '15%',
          y2: '15%',
        },
        legend: {
          show: false,
          data: ['本期', '同期'],
          textStyle: {
            color: '#fff',
            fontSize: '20',
          },
        },
        xAxis: {
          data: ['毕节市', '七星关区', '大方县', '黔西县'],
          //坐标轴
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#214776',
            },
            textStyle: {
              color: '#fff',
              fontSize: '10',
            },
          },
          type: 'category',
          axisLabel: {
            textStyle: {
              color: '#C5DFFB',
              fontWeight: 500,
              fontSize: '14',
            },
          },
          axisTick: {
            textStyle: {
              color: '#fff',
              fontSize: '16',
            },
            show: false,
          },
          splitLine: { show: false },
        },
        yAxis: {
          type: 'value',
          //坐标轴
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#214776',
            },
            textStyle: {
              color: '#fff',
              fontSize: '10',
            },
          },
          axisTick: {
            show: false,
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#C5DFFB',
            },
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: '#13365f',
            },
          },
        },
        series: [
          {
            z: 1,
            name: '本期',
            type: 'bar',
            barWidth: barWidth,
            barGap: '0%',
            data: data,
            itemStyle: {
              normal: {
                color: color,
              },
            },
          },
          {
            z: 2,
            name: '本期',
            type: 'pictorialBar',
            data: sideData,
            symbol: 'diamond',
            symbolOffset: ['-75%', '50%'],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color,
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            name: '本期',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: data,
            symbol: 'diamond',
            symbolOffset: ['-75%', '-50%'],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderWidth: 2,
                color: colorArr[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 1,
            name: '同期',
            type: 'bar',
            barWidth: barWidth,
            barGap: '50%',
            data: data2,
            itemStyle: {
              normal: {
                color: color,
              },
            },
          },
          {
            z: 2,
            name: '同期',
            type: 'pictorialBar',
            data: sideData2,
            symbol: 'diamond',
            symbolOffset: ['75%', '50%'],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: color,
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 3,
            name: '同期',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: data2,
            symbol: 'diamond',
            symbolOffset: ['75%', '-50%'],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderWidth: 2,
                color: colorArr[2],
              },
            },
            tooltip: {
              show: false,
            },
          },
        ],
      }

      const option1 = {
        xAxis: {
          type: 'category',
          data: ['好借口', '一', '计划考', '扃饥渴', '环境'],
          name: '教室',
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            symbolSize: [15, 17],
            lineStyle: {
              color: '#000000',
              width: 2, //  改变坐标线的颜色
            },
          },
          axisLabel: {
            //调整x轴的lable
            textStyle: {
              fontSize: 12, // 让字体变大
            },
          },
        },
        yAxis: {
          type: 'value',
          name: '时长（小时）',
          splitLine: {
            //刻度线
            show: false,
          },
          splitArea: {
            //柱状图后面的背景色
            show: true,
            areaStyle: {
              color: ['rgba(221,247,250,0.7)', 'rgba(245,249,232,0.7)'],
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //调整y轴的lable
            textStyle: {
              fontSize: 12, // 让字体变大
            },
            show: true,
          },
          axisLine: {
            symbol: ['none', 'arrow'],
            symbolSize: [15, 17],
            lineStyle: {
              color: '#000000',
              width: 2, //  改变坐标线的颜色
            },
          },
        },
        series: [
          {
            name: '时长统计',
            type: 'bar',
            showSymbol: false,
            hoverAnimation: false,
            data: ['200', '300', '450'],
            barWidth: 17, //柱图宽度
            itemStyle: {
              //左面
              normal: {
                color: function (params) {
                  let colorList = [
                    '#EA5353',
                    '#DB8D4D',
                    '#9DD530',
                    '#38CFCA',
                    '#6C54E2',
                    '#749f83',
                    '#ca8622',
                    '#bda29a',
                    '#6e7074',
                    '#546570',
                  ]
                  return colorList[params.dataIndex]
                },
                barBorderRadius: [0, 0, 0, 180],
              },
            },
          },
          {
            name: 'a',
            tooltip: {
              show: false,
            },
            type: 'bar',
            barWidth: 17,
            itemStyle: {
              //右面
              normal: {
                color: function (params) {
                  let colorList = [
                    '#FA6363',
                    '#F1A363',
                    '#AEE93C',
                    '#41EBE5',
                    '#866FF5',
                    '#749f83',
                    '#ca8622',
                    '#bda29a',
                    '#6e7074',
                    '#546570',
                  ]
                  return colorList[params.dataIndex]
                },
                barBorderRadius: [0, 0, 180, 0],
              },
            },
            data: ['200', '300', '450'],

            barGap: 0,
          },
          {
            name: 'b',
            tooltip: {
              show: false,
            },
            type: 'pictorialBar',
            itemStyle: {
              //顶部
              normal: {
                color: function (params) {
                  let colorList = [
                    '#FC9F9F',
                    '#F7B177',
                    '#BBF64A',
                    '#4DF4EE',
                    '#947FFA',
                    '#749f83',
                    '#ca8622',
                    '#bda29a',
                    '#6e7074',
                    '#546570',
                  ]
                  return colorList[params.dataIndex]
                },
                borderColor: '',
                borderWidth: 0.01,
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 16,
                    fontFamily: '微软雅黑',
                  },
                },
              },
            },
            symbol: 'rect',
            symbolRotate: 45,
            symbolSize: ['24', '24'],
            symbolOffset: ['0', '-11'],
            symbolPosition: 'end',
            data: ['200', '300', '450'],

            z: 3,
          },
        ],
      }
      option && initEcharts.setOption(option)
    },

    append(data) {
      const newChild = { id: id++, label: 'testtest', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
      console.log('data1', data)
    },
  },
}
</script>

<style scoped lang="scss">
.userCenterPage {
  height: 100%;
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
